<template>
    <div class="student-dashboard">
    <el-row :gutter="20">
      <!-- 左侧 - 雷达图 (占比60%) -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <el-card class="radar-card">
          <div slot="header">
            <span>能力评估雷达图</span>
          </div>
          <student-ability-radar :student-data="studentAbilityData" />
        </el-card>
      </el-col>

      <!-- 右侧 - 成绩表格 (占比40%) -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="grade-card">
          <div slot="header">
            <span>近期课程成绩</span>
            <el-button 
              size="mini" 
              style="float: right; padding: 3px 0" 
              type="text"
              @click="viewAllGrades">
              查看全部
            </el-button>
          </div>
          <el-table
            :data="courseGrades"
            style="width: 100%"
            height="400"
            :show-header="true"
            border
            stripe>
            <el-table-column
              prop="courseName"
              label="课程名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="studentName"
              label="姓名"
              width="80">
              <template slot-scope="scope">
                <el-tag 
                  :type="getScoreType(scope.row.score)"
                  size="small">
                  {{ scope.row.studentName }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="finalScore"
              label="成绩"
              width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.finalScore }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="academicYear"
              label="学年">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import StudentAbilityRadar from '@/components/StudentAbilityRadar';

import { getByStudentId } from '@/api/academic/info'; // 导入API方法

export default {
  name: 'StudentDashboard',
  components: {
    StudentAbilityRadar
  },
  data() {
    return {
      studentAbilityData: {
        name: '张伟',
        scores: {
          knowledgeMastery: 85,
          problemSolving: 78,
          creativity: 92,
          teamwork: 70,
          communication: 65,
          selfLearning: 88
        }
      },
      courseGrades: [], // 初始化为空数组
      loading: false, // 加载状态
      error: null // 错误信息
    }
  },
  created() {
    this.fetchStudentData(); // 组件创建时获取数据
  },
  methods: {
    getScoreType(score) {
      if (score >= 90) return 'success'
      if (score >= 80) return 'primary'
      if (score >= 70) return 'warning'
      return 'danger'
    },
    viewAllGrades() {
      this.$router.push('/student/grades')
    },
    async fetchStudentData() {
  this.loading = true;
  this.error = null;
  
  try {
    const response = await getByStudentId();
    console.log('获取到的原始数据:', response);
    this.courseGrades = response.map(item => ({
      courseName: item.courseName,
      studentName: item.studentName,
      finalScore: item.finalGrade,
      academicYear: item.semester
    }));
    console.log('映射后的数据:', this.courseGrades);
    console.log('获取到的原始数据:', this.finalGrade);
  } catch (error) {
    this.error = error.message || '获取数据失败';
    console.error('获取学生数据失败:', error);
  } finally {
    this.loading = false;
  }
}}}
</script>

<style lang="scss" scoped>
.student-dashboard {
  padding: 20px;
  
  .el-card {
    margin-bottom: 20px;
    
    ::v-deep .el-card__body {
      padding: 20px;
    }
  }
  
  .radar-card {
    height: 500px;
  }
  
  .grade-card {
    height: 500px;
    
    ::v-deep .el-card__body {
      padding: 10px;
    }
  }
  
  @media (max-width: 992px) {
    .el-col {
      margin-bottom: 20px;
    }
    
    .radar-card,
    .grade-card {
      height: auto;
    }
  }
}
</style>